<template>
	<view class="box">
		<view class="fixed-br" v-if="showTop" @click="toTop">
			<view id='top'>
				<image src="../../static/images/top.png" mode=""></image>
			</view>
		</view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar" :style="`background:rgba(255, 255, 255, ${opacity});`">
					<view class="fill-height el-flex">
						<view class="header-btn2">
							<image :src="`../../static/images/${leftImg}.png`" mode="" @click="Back"></image>
						</view>
						<view class="placeholder">
							<text class="text-ellipsis" :style="`color: ${textColor};`">{{title}}</text>
						</view>
						<view class="header-btn2 share-btn">
							<image :src="`../../static/images/${rightImg}.png`" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="component-list-channel">
				<view class="channel_gallery">
					<u-swiper :list="swiperImgList" height='6rem' circular @click="clickSwiperItem" indicator bgColor=''
						indicatorMode="dot"></u-swiper>
				</view>
				<view class="channel_box">
					<view class="channel-tab">
						<u-row class="tab-list">
							<u-col span="4" v-for='(item,index) in next_items' :key="index">
								<view class="tab-item el-flex">
									<image :src="item.img_url" mode=""></image>
									<text>{{item.title}}</text>
								</view>
							</u-col>
						</u-row>
						<view class="scroll-list el-flex">
							<block v-for="(item, index) in channelList" :key="index">
								<view class="scroll-item">
									<image :src="item.img_url" mode="widthFix"></image>
									<view class="scroll-text">
										{{item.title}}
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>

				<block v-for="(item,index) in otherDetailList" :key="index">
					<template v-if="item.view_type=='channel_title'">
						<view class="channel_title ">
							{{item.body.title}}
						</view>
					</template>
					<template v-if="item.view_type=='cells_auto_fill'">
						<view class="cells_auto_fill multi_cell"
							:style="{'width': (item.body.w)/100+'rem','height': (item.body.h)/100+'rem','background':item.body.bg_color}">
							<u-row>
								<u-col span="4" v-for="(fill,fillIndex) in item.body.items" @click='getCellItem(fill)'
									:key="fillIndex">
									<image :src="fill.img_url"
										:style="{'width': '100%','height': (item.body.h)/100+'rem'}" mode="">
									</image>
								</u-col>
							</u-row>
						</view>
					</template>
					<template v-if="item.view_type=='channel_three_combination'">
						<view class="channel_three_combination el-flex">
							<view class="left-side" @click="getCellItem(item.body.items[0])">
								<image :src="item.body.items[0].img_url" mode=""></image>
								<view class="title">
									{{item.body.items[0].title}}
									<text
										:style="{'color':item.body.items[0].text_color}">{{item.body.items[0].subtitle}}</text>
								</view>
							</view>
							<view class="right-side el-flex">
								<view class="right-side-item" @click="getCellItem(i)"
									v-for="(i,j) in item.body.items.slice(1)" :key="j">
									<image :src="i.img_url" mode=""></image>e
									<view class="title">
										{{i.title}}
										<text :style="{'color':i.text_color}">{{i.subtitle}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.view_type=='divider_line'">
						<view class="divider_line"></view>
					</template>
					<template v-if="item.view_type=='channel_hot_sale'">
						<view class="channel_hot_sale">
							<view class="hot_sale-item" @click="getCellItem(child)" v-for="(child,i) in item.body.items"
								:key="i">
								<view class="text-box">
									<view class="goods-title text-ellipsis">
										{{child.product_name}}
										<text :style="{'color':child.text_color}"
											class="text-ellipsis">{{child.product_tag}}</text>
									</view>
									<view class="goods-price">
										<text class="org-price price">
											￥{{child.product_price}}
										</text>
									</view>
									<view class="goods-tag text-ellipsis" :style="{'background':child.bg_color_square}">
										{{child.button_text}}
									</view>
								</view>
								<view class="img-box">
									<image :src="child.img_url" mode=""></image>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.view_type=='channel_new_product'">
						<view class="channel_new_product el-flex">
							<view class="product-item" @click="getCellItem(i)" v-for="(i,j) in item.body.items">
								<view class="bg-img-box">
									<image :src="i.big_img_url" mode=""></image>
								</view>
								<view class="goods-content">
									<view class="goods-title text-ellipsis">
										{{i.product_name}}
										<text class="text-ellipsis">{{i.product_tag}}</text>
									</view>
									<view class="goods-tag text-ellipsis" :style="{'color':i.text_color}">
										{{i.button_text}}
									</view>
									<view class="img-box">
										<image :src="i.img_url" mode=""></image>
									</view>
									<view class="goods-price">
										<view class="org-price price">
											¥{{i.product_price}}<text v-if="i.show_price_qi"
												class="show_price_qi">起</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</block>
			</view>
			<view class="channel-news-feed">
				<u-sticky bgColor="#fff">
					<view class="tab-bar" @touchmove.stop>
						<u-tabs :list="channel_tab_list" keyName='title' lineColor="#ff5934" :current='tabIndex'
							:activeStyle="{color: '#ff5934'}" @click='clickTab'></u-tabs>
					</view>
				</u-sticky>
				<view class="news-feed-box">
					<view class="news-feed">
						<template v-if="dataList.length==0">
							<view class="empty-data">
								<u-empty mode="data" icon="../../static/images/empty.png">
								</u-empty>
							</view>
						</template>
						<template v-else>
							<u-row gutter="5">
								<u-col span="6" @click="getCellItem(item.body.items[0])"
									v-for="(item,index) in dataList" :key="index">
									<view class="inner-box goods-item  animated pulse">
										<view class="icon-del">
											x
										</view>
										<view class="img-box">
											<LazyLoad :src="item.body.items[0].url" width='100%' height='100%'>
											</LazyLoad>

										</view>
										<view class="text-box">
											<view class="title goods-title">
												{{item.body.items[0].product_name}}
											</view>
											<view class="goods-price">
												<view class="org-price price">
													¥{{item.body.items[0].product_price}}
												</view>
												<view class="price cur-price">
													¥{{item.body.items[0].prod_org_price}}
												</view>
											</view>
											<view class="goods-label">
												{{item.body.items[0].label_title}}
											</view>
										</view>
									</view>
								</u-col>

							</u-row>
						</template>

					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			LazyLoad
		},
		data() {
			return {
				opacity: 0,
				leftImg: 'left',
				rightImg: 'search',
				textColor: 'white',
				scrollTop: 0,
				channel_tab_list: [],
				dataInfoList: [],
				tabIndex: 0,
				dataInfo: {},
				dataList: [],
				page_index: 1,
				showTop: false
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
			if (res.scrollTop >= 200) {
				this.leftImg = 'left_b'
				this.rightImg = 'search_b'
				this.textColor = 'black'
				this.opacity = 1
			} else {
				this.leftImg = 'left'
				this.rightImg = 'search'
				this.textColor = 'white'
				this.opacity = res.scrollTop / 200
			}
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.fetchGoodsData()
				},
			},
			scrollTop: {
				handler(newVal) {
					if (newVal >= 700) {
						this.showTop = true
					} else {
						this.showTop = false
					}
				},
				immediate: true
			}
		},
		computed: {
			block_id() {
				return this.channel_tab_list[this.tabIndex] && this.channel_tab_list[this.tabIndex].block_id
			},
			goodId() {
				return this.channel_tab_list[this.tabIndex] && this.channel_tab_list[this.tabIndex].id
			},
			title() {
				return this.dataInfo.body && this.dataInfo.body.title
			},
			swiperImgList() {
				let list = []
				this.dataInfoList.forEach(item => {
					if (item.view_type == "channel_gallery") {
						item.body.items.forEach(item => {
							list.push(item.img_url)
						})
					}
				})
				return list
			},
			otherDetailList() {
				let list = []
				this.dataInfoList && this.dataInfoList.forEach(item => {
					if (item.view_type != "channel_gallery" && item.view_type != "channel_box") {
						list.push(item)
					}
				})
				return list
			},
			channelList() {
				let list = []
				this.dataInfoList.forEach(item => {
					if (item.view_type == "channel_box") {
						list = item.body.items
					}
				})
				return list
			},
			next_items() {
				let list = []
				this.dataInfoList.forEach(item => {
					if (item.view_type == "channel_box") {
						list = item.body.next_items
					}
				})
				return list
			}
		},
		onReachBottom() {
			this.page_index++
			this.fetchGoodsData(true)
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			getCellItem(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {

						}
					})
				} else if (action.type == "first_channel") {
					this.toChannelDetail(action.path)
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {

						}
					})
				} else if (action.type == 'second_channel') {
					uni.navigateTo({
						url: `/subPage/minorDetail/minorDetail?id=${action.path}`,
						success() {

						}
					})
				}
			},
			toChannelDetail(id) {
				uni.navigateTo({
					url: `/subPage/channelDetail/channelDetail?id=${id}`
				})
			},

			clickTab(e) {
				this.tabIndex = e.index
				this.page_index = 1
			},
			clickSwiperItem(e) {

			},
			fetchGoodsData(flag) {
				let routes = getCurrentPages();
				let curRoute = routes[routes.length - 1].options
				this.$request.get('/getChannelData', {
					page_id: curRoute.id,
					block_id: this.block_id,
					id: this.goodId,
					page_index: this.page_index
				}).then((res) => {
					if (flag) {
						this.dataList = this.dataList.concat(res.data.data.sections)
					} else {
						this.dataList = res.data.data.sections
					}
				}).catch(e => {
					console.log('错误了:', e)
				})

			},
			fetchInfoData(id) {
				this.$request.get('/getChannelTab', {
					id: id
				}).then((res) => {
					this.dataInfoList = res.data.data.sections
					this.channel_tab_list = res.data.data.channel_tab_list.body.items
					this.dataInfo = res.data.data.channel_global_config
					this.fetchGoodsData()
				}).catch(e => {
					console.log('错误了:', e)
					uni.navigateTo({
						url: `/subPage/emptyData/emptyData`,
						success() {

						}
					})
				})

			},

		},
		onLoad(e) {
			this.fetchInfoData(e.id)
		},
	}
</script>
<style lang="scss" scoped>
	.box {
		background: #f6f6f6;

		.fixed-br {
			position: fixed;
			z-index: 997;
			bottom: 1.9rem;
			right: 0.38rem;

			#top {
				display: block;
				width: 0.77rem;
				height: 0.77rem;
				margin: 0.1rem auto 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.header {
			height: .96rem;
			line-height: 1.15;

			.status-bar {
				position: fixed;
			}

			.fill-height {
				height: .96rem;
				display: flex;
				align-items: center;
				flex: 1 1 auto;
				flex-wrap: nowrap;

				.header-btn2 {
					background: none;
					border-radius: 0;
					display: block;
					width: 0.6rem;
					height: .6rem;
					margin: 0 0.2rem;

					image {
						width: 0.5rem;
						height: .5rem;
					}
				}

				.share-btn {
					image {
						width: 0.6rem;
						height: .6rem;
					}
				}

				.placeholder {
					flex: 1;
					font-size: .3rem;
					text-align: center;

					text {
						font-size: .3rem;
						width: 100%;
					}

				}
			}
		}

	}

	.divider_line {
		border-bottom: 0.16rem solid rgb(246, 246, 246);
		background-color: rgb(246, 246, 246);
	}

	.component-list-channel {
		.channel_gallery {
			width: 100%;
			margin-bottom: -2.2rem;
			background: linear-gradient(180deg, #fff 80%, #f6f6f6);
		}

		.channel_box {
			padding: 0.2rem 0;
			margin: 0 0.24rem;
			background: #fff;
			border-radius: 0.16rem;
			padding-bottom: .15rem;
			position: relative;
			z-index: 11;

			.channel-tab {

				.tab-list {
					margin-bottom: 0.2rem;
				}

				.scroll-list {
					justify-content: space-around;
					flex-wrap: wrap;

					.scroll-item {
						line-height: 1.6;
						width: 20%;
						display: block;
						text-align: center;
						box-sizing: border-box;
						margin-bottom: .12rem;

						image {
							width: 0.86rem;
							margin: 0 auto;
						}

						.scroll-text {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							transform: scale(.98);
							font-size: .22rem;
						}
					}
				}


				.tab-item {
					line-height: 1.6;
					text-align: center;
					color: rgba(0, 0, 0, .25);

					image {
						display: inline-block;
						vertical-align: middle;
						width: 0.24rem;
						height: 0.24rem;
					}

					text {
						vertical-align: middle;
						font-size: .2rem;
						margin-left: 0.08rem;
					}
				}
			}
		}


		.channel_three_combination {
			background: #fff;
			border-radius: 0.16rem;
			margin: 0 0.24rem;

			.title {
				line-height: 1;
				position: absolute;
				top: 0.24rem;
				left: 0.24rem;
				right: 0.24rem;
				text-align: left;
				font-size: .28rem;
				font-weight: 700;
				white-space: nowrap;
				overflow: hidden;

				text {
					display: block;
					line-height: 1.8em;
					color: rgba(0, 0, 0, .5);
					font-size: .24rem;
					font-weight: 400;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.left-side {
				float: left;
				position: relative;
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				width: 50%;
				height: 3.2rem;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}

				.title {
					width: 3rem;

				}
			}

			.right-side {
				width: 50%;
				flex-direction: column;

				.right-side-item {
					width: 100%;
					height: 1.6rem;
					position: relative;
					display: block;
					overflow: hidden;

					image {

						display: block;
						width: 100%;
						height: 100%;
					}

					.title {
						width: 1.95rem;
					}
				}
			}
		}

		.channel_title {
			font-size: .32rem;
			font-weight: 700;
			padding: 0.24rem 0;
			margin: 0 0.24rem;
		}

		.channel_hot_sale {
			background: #fff;
			border-radius: 0.16rem;
			overflow: hidden;
			flex-wrap: wrap;
			margin: 0 0.24rem;

			.hot_sale-item {
				float: left;
				display: block;
				box-sizing: border-box;
				width: 50%;
				height: 1.86rem;
				position: relative;
				overflow: hidden;

				.text-box {
					position: absolute;
					z-index: 2;
					top: 0.24rem;
					left: 0.24rem;
					right: 0.24rem;
					text-align: left;

					.goods-title {
						font-size: .28rem;
						font-weight: 700;
						width: 2.2rem;
						line-height: 1.15;

						text {
							display: block;
							line-height: 1.6em;
							color: rgba(0, 0, 0, .5);
							font-size: .24rem;
							font-weight: 400;
							width: 1.9rem;
						}
					}

					.goods-price {
						font-size: .24rem;
						line-height: 1.15;
						display: flex;
						align-items: center;
						margin: 0.16rem 0 0 0;

						.org-price {
							font-size: .24rem;
						}
					}

					.goods-tag {
						background-color: rgb(236, 96, 85);
						display: inline-block;
						padding: 0 0.08rem;
						line-height: .28rem;
						font-size: .22rem;
						border-radius: 0.04rem;
						color: #fff;
						max-width: 1.32rem;
						transform-origin: left top;
						transform: scale(.94);
					}
				}

				.img-box {
					position: absolute;
					z-index: 1;
					top: 0.56rem;
					right: 0.16rem;
					width: 1.28rem;
					height: 1.28rem;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.channel_new_product {
			overflow: hidden;
			margin: 0 0.24rem;

			.product-item {
				position: relative;
				display: block;
				box-sizing: border-box;
				width: 100%;
				height: 3.2rem;
				overflow: hidden;
				color: #fff;
				margin-left: 0.16rem;
				background-color: rgb(132, 144, 237);
				border-radius: 0.16rem;

				&:first-child {
					margin-left: 0;
				}

				view {
					line-height: 1;
				}

				.bg-img-box {
					width: 100%;
					height: 100%;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.goods-content {
					position: absolute;
					top: 0.2rem;
					left: 0;
					width: 100%;
					text-align: center;

					.goods-title {
						font-size: .26rem;
						font-weight: 700;
						margin: 0 auto;
						width: 1.9rem;

						text {
							display: block;
							line-height: 2em;
							font-size: .2rem;
							font-weight: 400;
						}
					}

					.goods-tag {
						color: rgb(132, 144, 237);
						display: inline-block;
						padding: 0 0.16rem;
						line-height: .36rem;
						border-radius: 0.36rem;
						background-color: #fff;
						margin: 0 auto;
						max-width: 1.6rem;
						font-size: .22rem;
						transform: scale(.94);
					}

					.img-box {
						width: 1.44rem;
						height: 1.44rem;
						margin: 0 auto;

						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					.goods-price {
						font-size: .28rem;
						font-weight: bolder;

						.show_price_qi {
							display: inline-block;
							vertical-align: text-top;
							transform-origin: center bottom;
							transform: scale(.7);
							font-size: .28rem;
						}

						.org-price {
							position: relative;
							padding-left: 0;
							line-height: 1em;
						}
					}
				}
			}
		}
	}

	.channel-news-feed {
		/deep/.u-sticky {
			z-index: 999;
			top: 0.84rem !important;
		}

		.tab-bar {
			/deep/.u-tabs__wrapper__nav__item__text {
				font-size: .32rem;
				font-weight: 700;
			}

			/deep/.u-tabs__wrapper__nav__item {
				height: 0.7rem !important;
			}

			/deep/.u-tabs__wrapper__nav__item,
			/deep/.u-tabs__wrapper__nav,
			view {
				align-items: center;

			}
		}
	}

	.news-feed-box {

		.empty-data {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0)
		}

		.news-feed {
			position: relative;
			padding: .2rem;
			min-height: 88vh;

			.u-row {
				margin-left: 0 !important;
				flex-wrap: wrap;

			}

			.u-col {
				margin-bottom: .2rem;
			}

			.goods-item {
				position: relative;
				background: #fff;
				width: 3.28rem;
				border-radius: 0.16rem;
				overflow: hidden;

				.icon-del {
					width: 0.44rem;
					height: 0.44rem;
					position: absolute;
					top: 0;
					right: 0;
				}

				.img-box {
					width: 3.28rem;
					height: 3.28rem;

					image {
						width: 3.28rem;
						height: 3.28rem;
					}
				}

				.text-box {
					text-align: left;
					padding: 0.16rem 0.24rem 0.24rem;

					.goods-title {
						height: 0.66rem;
						font-size: .28rem;
						font-weight: 700;
						line-height: 1.2em;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.goods-price {
						font-size: .32rem;
						font-weight: bolder;
						margin: 0.16rem 0 0;
						color: #ff5934;

						.org-price {
							line-height: 1em;
							font-size: .32rem;
						}

						.cur-price {
							display: block;
							font-weight: 400;
							text-decoration: line-through;
							font-size: .32rem;
							color: rgba(0, 0, 0, .3);
							transform-origin: left center;
							transform: scale(.7);
						}

					}

					.goods-label {
						font-size: .22rem;
						display: inline-block;
						padding: 0 0.08rem;
						line-height: .28rem;
						color: #ababab;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
						margin: 0.12rem 0 0;
					}
				}
			}
		}
	}
</style>